<template>
  <view class="container">
    <uni-nav-bar title="待提交点采单" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
      rightText="清空" @clickRight="delAll"></uni-nav-bar>
    <scroll-view style="box-sizing: border-box;overflow: hidden;"
      :style="{ paddingBottom: `calc(${safeAreaBottom}px + 80rpx)`, height: `calc(100vh - 88rpx - ${statusBarHeight}px)` }"
      scroll-y enhanced :show-scrollbar="false" :scroll-with-animation="true" refresher-enabled
      @refresherrefresh="pulldownRefresh" :refresher-triggered="refreshStatus" @touchmove.stop>
      <view class="list" v-if="goodsList.length > 0">
        <view class="item" v-for="(item, index) in goodsList" :key="item.id + index">
          <view class="top">
            <view class="title u-ellipsis">
              {{ item.commodityName }}
            </view>
            <view class="sub_title">
              规格：{{ item.commodityStandard }}
            </view>
          </view>
          <view class="bottom">
            <view class="pic">
              <image :src="item.commodityImgUrl ? item.commodityImgUrl : '/static/index/noneImg.png'" mode="aspectFill">
              </image>
            </view>
            <view class="info">
              <view class="sub_title">点采价：{{ item.outboundPrice }} 元</view>
              <view class="sub_title">售价：{{ item.storePrice }} 元</view>
              <view class="sub_title">配送规格：{{ item.deliveryNorms }}</view>
              <view class="sub_title">品牌：{{ item.commodityBrand }}</view>
              <view class="sub_title">
                单品数量：<uni-number-box v-model="item.procureCount" :step="item.deliveryNorms" :min="item.deliveryNorms"
                  :max="item.deliveryNorms * 10000" />
              </view>
              <view class="sub_title" @click.stop="delPurchase(item)"><uni-icons type="trash" size="30"
                  color="#f54343"></uni-icons></view>
            </view>
          </view>
        </view>
      </view>
      <view
        style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
        v-if="goodsList.length == 0">
        <image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
      </view>
    </scroll-view>
    <view class="bottomFix btn type-1 toLeft" :style="{ paddingBottom: safeAreaBottom + 'px' }" @click.stop="toSubmit">
      <text>确 认 提 交</text>
    </view>
  </view>
</template>

<script>
let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
import { reqPurchaseWait, reqDelPurchaseItem, reqSubmitPurchase, reqDelPurchaseList } from '@/apis/goods.js'
export default {
  name: "WaitSubmit",
  data() {
    return {
      safeAreaBottom: safeAreaBottom,
      goodsList: [],
      copyList: [],
      refreshStatus: false,
    }
  },
  onLoad() {
    this.getWaitPurchase()
  },
  methods: {
    pulldownRefresh() {
      this.refreshStatus = true;
      this.getWaitPurchase();
    },
    async getWaitPurchase() {
      let res = await reqPurchaseWait({ submitStatus: 0 });
      if (res.code === 200) {
        this.goodsList = res.data.map(item => ({
          ...item,
          procureCount: item.deliveryNorms
        }));
        this.refreshStatus = false;
      }
    },
    delPurchase(item) {
      let { id } = item;
      uni.showModal({
        content: '是否删除该商品?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDelPurchaseItem({ id });
            if (res.code === 200) {
              this.copyList = this.goodsList.filter(it => it.id != id);
              await this.getWaitPurchase();
              if (this.goodsList.length === this.copyList.length) {
                this.goodsList = this.copyList;
                this.copyList = [];
              }
              uni.utils.toast('删除成功', 'success');
            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    },
    async toSubmit() {
      if (this.goodsList.length === 0) {
        uni.utils.toast('暂无商品');
        return;
      }
      let storePickVoList = this.goodsList.map(item =>
      ({
        id: item.id,
        commodityId: item.commodityId,
        procureCount: item.procureCount,
        deliveryNorms: item.deliveryNorms
      })
      )
      let res = await reqSubmitPurchase({ storePickVoList })
      if (res.code === 200) {
        uni.utils.toast('提交成功', 'success', true);
        this.getWaitPurchase();
      }
    },
    async delAll() {
      if (this.goodsList.length === 0) {
        uni.utils.toast('暂无商品');
        return;
      }
      let storePickIdList = this.goodsList.map(item => item.id);
      uni.showModal({
        content: '是否清空商品?',
        success: async (res) => {
          if (res.confirm) {
            let res = await reqDelPurchaseList({ storePickIdList });
            if (res.code === 200) {
              this.getWaitPurchase();
              uni.utils.toast('删除成功', 'success');
            }
          } else if (res.cancel) {
            console.log('取消');
            //TODO
          }
        }
      })
    }
  },
}
</script>
<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.container {
  height: 100vh;
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
}

.list {
  padding: 20rpx 20rpx;
  padding-bottom: 0;

  .item {
    padding: 20rpx 24rpx;
    background-color: #fff;
    border-radius: 8rpx;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 10rpx;

      .title {
        width: 500rpx;
        font-size: $uni-font-size-upBase;
        color: #000;
      }

      .sub_title {
        font-size: $uni-font-size-mini;
        flex: 1;
        color: #333;
        text-align: right;
      }
    }

    .bottom {
      display: flex;

      .pic {
        width: 200rpx;
        height: 200rpx;

        image {
          width: 100%;
          height: 100%;
          background-color: #f7f7f7;
        }
      }

      .info {
        padding-left: 20rpx;
        flex: 1;
        min-width: 440rpx;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .sub_title {
          font-size: $uni-font-size-mini;
          width: 50%;
          color: #333;

          &:last-child {
            text-align: right;
            width: 20%;
          }

          &:nth-last-child(2) {
            display: flex;
            align-items: center;
            width: 80%;
          }
        }
      }
    }
  }
}

.bottomFix {
  position: fixed;
  width: 100%;
  height: 80rpx;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-base;
}
</style>